Techniques

The template is built based on Twig, which is a technique in itself. But a number of other techniques are used to simplify development within the template.

SCSS

To make more possibilities available within CSS, the SASS language project was created. SASS, which stands for Syntactically Awesome Style Sheets, provides functions, mixins, variables, file imports, and nesting. To keep it readable for developers with no experience in SASS, we chose to use the SCSS variant. This syntax is closer to regular CSS syntax, so it is valid SCSS as well.

For example, we use the nesting feature a lot to avoid writing out a parent class each time. Mixins for media breakpoints are also very useful.

For more info about SCSS and SASS, you can visit https://sass-lang.com/.

jQuery

With JavaScript, you can make your site dynamic and apply changes to the HTML. To simplify this language a bit, we use jQuery to simplify things like document.getElementById('header') to $('#header'). Of course, you can always write vanilla JS, just know that jQuery is available. More info at https://api.jquery.com/.

jQueryUI

jQueryUI is used to build the price slider. This is a package that contains various UI components with functionality based on jQuery. Many components are also included in Bootstrap, so only the slider is used. More info at https://jqueryui.com/.

Bootstrap

Anyone starting with web development will eventually encounter Bootstrap. It is a solid foundation to build your site and contains styled components so the hardest things are already done for you. In the template, we use the SASS variant of Bootstrap 3 (https://github.com/twbs/bootstrap-sass). This is an older version of Bootstrap, but this ensures it works on every browser. The documentation can be found at https://getbootstrap.com/docs/3.4/, so make sure you use the V3 documentation, as V5 is already on the way.

Slick slider

At the top of pages, you often see banners or carousels. For the carousel, you can use slick slider. This is a simple package that is already applied in several places in the template. More info at https://kenwheeler.github.io/slick/

lazysizes

Lazysizes is a package that allows images to load only after the page has rendered. This makes the site faster because page loading happens later. Images outside the visible area are also only loaded when they are about to come into view. More info at https://github.com/aFarkas/lazysizes.

With lightbox, you can display images in a popup. This is used, for example, on standard product pages and gallery pages. It is a simple and widely used implementation. More info at https://lokeshdhakar.com/projects/lightbox2/.

datepicker

For selecting a date or time, a datepicker is added. This datepicker matches the Bootstrap look and also uses jQuery. More info at https://bootstrap-datepicker.readthedocs.io/en/v1.7.0/.

star-rating

cookieconsent

To inform users that cookies are used, the cookieconsent package is added. This displays a bar with text and a button that warns the user about cookies. However, this package has changed owners many times, so documentation for the used version is no longer available. You can obtain a new version at https://www.osano.com/cookieconsent/download/ by clicking Start coding to create a configuration for your website.

moment.js

With moment, you can format a date as you like. You can also manipulate a date and transform it into other valid values. More info at https://momentjs.com/.

parsley.js

For frontend validation of forms and displaying error messages, we use parsley.js. This allows you to specify how each field should be validated and shows an error message at the field. Until the error is resolved, the form cannot be submitted. You can also write custom validators. More info at https://parsleyjs.org/.